<template>
  <!-- 弹框确认and提示 -->
  <div v-if="!!confirmText && !!tooltip" class="inline-block" @click.stop="showConfirm">
    <a-tooltip :title="tooltip">
      <a-button v-bind="withoutClick" :disabled="disabled"> <slot></slot> </a-button>
    </a-tooltip>
  </div>
  <!-- 仅提示 -->
  <a-tooltip v-else-if="!confirmText && !!tooltip" :title="tooltip">
    <a-button v-bind="withoutClick" :disabled="disabled" @click="onCustomClick"> <slot></slot> </a-button>
  </a-tooltip>
  <!-- 仅弹框确认 -->
  <div v-else-if="!!confirmText && !tooltip" class="inline-block" @click.stop="showConfirm">
    <a-button v-bind="withoutClick" :disabled="disabled"> <slot></slot> </a-button>
  </div>
  <!-- 普通 -->
  <a-button v-else v-bind="withoutClick" :disabled="disabled" @click="onCustomClick"> <slot></slot> </a-button>
</template>

<script setup>
/**
 * @name 基础按钮组件
 * @description 在普通按钮基础上增加了弹窗确认和提示功能
 *
 */
import { ref, useAttrs, createVNode } from 'vue'
import { Modal } from 'ant-design-vue'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
import { debounce as _debounce } from 'lodash-es'

defineOptions({
  inheritAttrs: false
})
const props = defineProps({
  tooltip: {
    desc: '悬浮提示功能',
    type: String,
    default: ''
  },
  confirmTitle: {
    desc: '确认弹窗标题',
    type: String,
    default: '提示'
  },
  disabled: {
    type: Boolean,
    default: false
  },
  debounce: {
    desc: '防抖功能',
    type: [Number, Boolean, String],
    default: false
  },
  confirmText: {
    desc: '确认弹窗功能',
    type: String,
    default: ''
  }
})
const attrs = useAttrs()
const { onClick, ...withoutClick } = attrs
const open = ref(true)
const onOk = () => {
  onCustomClick()
  open.value = false
}
const onCustomClick = () => (props.debounce ? onDebounceClick() : onClick?.())
const onDebounceClick = _debounce(() => onClick?.(), props.debounce === true ? 500 : +props.debounce)
const showConfirm = () => {
  if (props.disabled) return
  Modal.confirm({
    title: props.confirmTitle,
    okText: '确定',
    centered: true,
    maskClosable: true,
    width: 560,
    cancelText: '取消',
    icon: createVNode(ExclamationCircleOutlined, { style: 'color:red' }),
    content: createVNode('div', { style: 'margin:24px 0;font-size:15px' }, props.confirmText),
    onOk
  })
}
</script>
